import { RewardLog } from '@/api/draw'

import Logo from '@/assets/logo.png'
import Button2 from '@/assets/reuslt-button-2.png'
import Button1 from '@/assets/reuslt-button-3.png'

import MallLinkButton from '@/components/MallLinkButton'
import PageBack from '@/components/PageBack'
import useAddressFillted from '@/components/useAddressFillted'
import useFillAddress from '@/components/useFillAddress'
import usePoster from '@/components/usePoster'
import useVirtualDialog from '@/components/useVirtualDialog'

import { XyzTransitionGroup } from '@animxyz/react'
import classNames from 'classnames'
import { useMemo } from 'react'
import { history, useQuery } from 'umi'
import styles from './index.module.less'

import { PrizeConfig } from './prize'
import '@animxyz/core'

export default function Page() {
  // ?虚拟奖品弹窗
  const { open: openVirtualDialog, renderNode: renderVirtualDialogNode }
    = useVirtualDialog()

  const { renderNode: renderPosterNode, open: openPoster } = usePoster()

  const { data: rewardLog, refetch: refetchRewardLog } = useQuery(
    ['get/log'],
    RewardLog,
    {
      onSuccess(data) {
        // ?如果没有中奖，则重定向到未中奖
        if (!data.lottery_result)
          history.replace('/result/thanks')
      },
    },
  )
  const curPrize = useMemo(
    () => PrizeConfig.find(i => i.id === rewardLog?.lottery_result),
    [rewardLog],
  )

  const { renderNode: renderAddressFilltedNode, open: openAddressFillted }
    = useAddressFillted()

  // ?填写奖品地址
  const { renderNode: renderAddressNode, open: openAddress } = useFillAddress({
    onConfirm() {
      refetchRewardLog()
      openAddressFillted()
    },
  })

  return (
    <>
      <PageBack />
      <XyzTransitionGroup
        duration="auto"
        appear
        appearVisible
        xyz="fade"
        className={classNames(
          'min-h-screen bg-cover bg-bottom flex flex-col pt-[50px] items-center relative overflow-hidden',
          styles.pageContainer,
        )}
      >

        <img src={Logo} className="block h-8" alt="" />

        {
          curPrize?.title && (
            <img
              src={curPrize.title}
              className=" block w-[400px] mt-8"
              alt=""
            />
          )
        }

        {/* 奖品容器， 尺寸是700x700 */}
        <div
          className={classNames(
            'flex relative justify-center items-center mt-12 -mb-[80px] w-[400px] h-[400px]',
          )}
        >
          <img
            src={curPrize?.url}
            className="block object-contain relative w-full h-full with-ani-float"
            alt=""
          />
        </div>

        {/* kang */}
        <div className="flex relative justify-start px-4 mb-2 w-full">
          <i className={classNames(styles.kang, 'block')}></i>
        </div>

        {/* buttons */}
        <div className="flex relative space-x-3">
          <button
            name="即刻领取"
            type="button"
            onClick={() => {
              // ?如果抽中的是虚拟奖品，则打开兑换码弹窗
              if (rewardLog?.lottery_result === 136) {
                openVirtualDialog()
                return
              }

              if (rewardLog?.name && rewardLog?.address && rewardLog?.phone) {
                return openAddressFillted()
              }

              openAddress()
            }}
            className={classNames(
              'bg-no-repeat bg-contain with-ani-scales w-[340px] h-[135px]',
            )}
            style={{
              backgroundImage: `url(${Button1})`,
            }}
          />

          <button
            name="邀好友来抽"
            type="button"
            onClick={() => {
              openPoster()
            }}
            className={classNames(
              'bg-no-repeat bg-contain with-ani-scales w-[340px] h-[135px]',
            )}
            style={{
              backgroundImage: `url(${Button2})`,
            }}
          />
        </div>

      </XyzTransitionGroup>

      <div className="absolute right-0 bottom-0">
        <MallLinkButton defaultLogo />
      </div>

      {renderAddressNode()}
      {renderAddressFilltedNode()}
      {renderPosterNode()}
      {renderVirtualDialogNode()}
    </>
  )
}
